<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .outer {
      width: 200px;
      height: 200px;
      border: 1px solid black;
      margin: 100px auto 0;
    }
    .inner {
      width: 200px;
      height: 200px;
      background-color: red;
      /* 水平和垂直位移100px,再沿着元素中心缩放 0.5 倍 */
      /* transform:  translate(100px, 100px) scale(0.5) ; */
      /* 基于元素自身尺寸缩放0.5倍，然后沿着没有缩放之前的x轴+y轴(左上角)位移100px */
      /* transform: scale(0.5) translate(100px, 100px); */
      /* 先沿着x轴+y轴(元素左上角)移动100px然后基于元素自身中心旋转35度 */
      /* transform: translate(100px, 100px) rotate(35deg); */
      /* 先沿着元素中心旋转35度，然后基于元素自身旋转后的x轴+y轴位移100px */
      /* transform: rotate(35deg) translate(100px, 100px); */
      /* transform: translate(100px, 100px) rotate(35deg); */
      /* 建议先位移再缩放最后旋转 */
      /* transform: translate(100px, 100px) scale(.5) rotate(35deg); */

      /* 修改旋转点位置为左上角 */
      /* transform-origin: left top; */
      /* x轴50px位置和y轴50px位置为旋转(中心)点 */
      /* transform-origin: 50px 50px; */

      /* 以元素自身尺寸为基数,设置旋转(中心)点为x轴25%+y轴25% */
      /* transform-origin: 25% 25%; */

      /* 如果给一个值是像素的情况下 y 轴取中间位置 */
      /* transform-origin: 50px; */

      /* 如果给一个值是关键字,则另一个轴取中间位置 */
      /* transform-origin: left; */
      /* transform: rotate(35deg); */

      transform-origin: left top;
      transform: scale(.5);
    }
  </style>
</head>
<body>
  <div class="outer">
    <div class="inner">hello world</div>
  </div>
</body>
</html>
